import React, { Component, } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, AsyncStorage, } from 'react-native';
import urls from '../../app/constants/urls';
import Toast from '../../components/Toast'
import { OrderInfo } from './orderInfo';

interface IOrderDetailProps {
  dataSource: OrderInfo
}

export default class OrderDetail extends Component<IOrderDetailProps> {
  constructor(props) {
    super(props);
  }

  static navigationOptions = ({ navigation, }) => ({
    headerTitle: '转账详情'
  });

  processOrderInfo(data: OrderInfo) {
    const renderData = {
      amount: data.dealAmount,
      status: data.dealStateStr,
      dealType: data.dealType,
      receiver: [
        {
          key: '汇款时间',
          value: data.dealTime,
        },
        {
          key: '汇款流水号',
          value: data.dealNo,
        },  
        {
          key: '交易渠道',
          value: data.dealChannelTypeStr
        },  
        {
          key: '交易类型',
          value: data.dealTypeStr
        },  
        {
          key: '汇款人姓名',
          value: data.nameEn,
        },
        {
          key: '汇款账号',
          value: data.accNo,
        },
        {
          key: '汇款金额',
          value: data.dealAmount,
        },  {
          key: '手续费',
          value: data.chargeFee,
        }
      ],
      remiter: [
        {
          key: '收款方类型',
          value: data.receiverTypeStr,
        },
        {
          key: '收款方名称',
          value: data.receiverName,
        },
        {
          key: '收款方账号',
          value: data.receiverBankCard,
        },
        {
          key: '转账用途',
          value: data.useTypeStr,
        }
      ]
    }
    return renderData
  }

  render() {
    let orderInfo = this.props?.navigation?.state?.params || this.props.dataSource
    console.log('TAGGG', `orderDetail==render==orderList==${JSON.stringify(orderInfo)}`);
    const renderData = this.processOrderInfo(orderInfo.data)
    console.log('TAGGG', `orderDetail==render==renderData==${JSON.stringify(renderData)}`);
    return (
      <View style={styles.container}>
          <Text style={styles.txtAmount}>{renderData.dealType == 1 ? ('+ ' + renderData.amount) : ('- ' + renderData.amount)}</Text>
          <Text style={styles.txtStatus}>{renderData.status}</Text>
        <ScrollView ref="ScrollView">
          {this.renderList(renderData.receiver)}
          <View style={styles.line}></View>
          {this.renderList(renderData.remiter)}
        </ScrollView>
      </View>
    );
  }

  renderList(data) {
    const list = [];
    for (let j = 0; j < data.length; j++) {
      const element = data[j];
      console.log('TAGGG', element);
      const cityCell =
        (<View key={ j } style={styles.lineContainerTop}>
            <Text style={styles.txtKey}>{ element.key }</Text>
            <Text style={styles.txtValue}>{ element.value }</Text>
        </View>);
      list.push(cityCell);
    }
    return list;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingBottom: 25,
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 15
  },
  txtAmount: {
    fontSize: 40,
    color: "#0091ff",
    textAlign: 'center',
    fontWeight: '600',
    marginTop: 10,
  },
  txtStatus: {
    fontSize: 16,
    color: "#212121",
    textAlign: 'center',
    marginTop: 20,
    marginBottom: 20,
  },
  line: {
    height: 0.6,
    backgroundColor:"#E5E5E5",
    marginTop: 8,
    marginBottom: 8,
  },
  lineContainerTop: {
    flexDirection: 'row',
    paddingTop: 10,
    paddingBottom: 10,
  },
  txtKey: {
    fontSize: 14,
    color: "#858C9C",
    alignItems: 'flex-start'
  },
  txtValue: {
    fontSize: 14,
    color: "#212121",
    position:'absolute',
    right: 0,
    top: 10,
  },
});